<template>
  <template v-for="(item, index) in menuList" :key="index">
    <el-sub-menu
      v-if="item.children && item.children.length && !item.meta?.isHide"
      :key="`sub-menu-${item.path}`"
      :index="item.path"
    >
      <template #title>
        <span class="text-lg">{{ item.meta?.title || '' }}</span>
      </template>
      <SiderMenu :menuList="item.children" />
    </el-sub-menu>
    <template v-else>
      <el-menu-item v-if="!item.meta?.isHide" :key="`menu-item-${item.path}`" :index="item.path">
        <span class="text-lg">{{ item.meta?.title || '' }}</span>
      </el-menu-item>
    </template>
  </template>
</template>

<script setup lang="ts">
import type { RouteRecordRaw } from 'vue-router';
import SiderMenu from '@/components/SiderMenu.vue';

defineProps<{
  menuList: RouteRecordRaw[];
}>();
</script>

<style lang="scss" scoped></style>
